// 创建 overlay 容器
const overlayDiv = document.createElement("div");
overlayDiv.className = "overlay";
overlayDiv.id = "overlay";

// 创建图片元素
const img = document.createElement("img");
img.id = "overlay-img";
img.src = "";
img.alt = "大图";

// 组合并添加到 body 末尾
overlayDiv.appendChild(img);
document.body.appendChild(overlayDiv);

/* 点击放大 */
const imgs = document.querySelectorAll("img");
const overlay = document.getElementById("overlay");
const overlayImg = document.getElementById("overlay-img");

imgs.forEach((img) => {
  img.addEventListener("click", () => {
    const largeSrc = img.getAttribute("data-original") || img.src;
    overlayImg.src = largeSrc;
    overlay.style.display = "flex";
    document.body.style.overflow = "hidden"; // 禁止背景滚动
  });
});

overlay.addEventListener("click", () => {
  overlay.style.display = "none";
  document.body.style.overflow = "";
});

// ESC 键关闭
document.addEventListener("keydown", (e) => {
  if (e.key === "Escape" && overlay.style.display === "flex") {
    overlay.style.display = "none";
    document.body.style.overflow = "";
  }
});
